﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Gestalt Video Player Widget Documentation</title>
<style type="text/css">
.style1 {
	font-size: large;
	font-weight: bold;
}
</style>
</head>

<body>

<p class="style1">Gestalt HTML5 Video Player Widget</p>
<p>To use the Video Widget you will need to have Silverlight installed. You can get Silverlight 
at: <a href="http://www.silverlight.net">http://www.silverlight.net</a>.</p>
<p>The video Gestalt Widget has been designed to support a simple mode where you 
only only will need to add a reference to two JavaScript files plus some HTML5 video 
tag markup and you are good to go. To see an example of this this take a look at 
the embed <a href="video_embed.html">sample</a></p>
<p>If you would like to modify the user interface appearance:</p>
<p>C<span class="caps">hange the XAML that defines it in the added skin attribute of the video tag</span>. 
You can either manually do this in a 
text editor, or you can load up the <span class="caps">original XAML</span> file 
in Expression Blend 3. Just save the changes to a new file named &quot;newskin.xaml&quot; 
that&#39;s in the same directory as the original file modify the &quot;skin&quot; attribute as 
shown below, and refresh the browser to view the changes. Like so:<br/><br />&lt;video 
id=&quot;audio1&quot;<br />..<br />skin=&quot;newskin.xaml&quot;&gt;<br />&lt;source src=&quot;path to file&quot;&gt;&lt;/source&gt;<br />&lt;/video&gt; 
	
</p>
<p><strong>Attributes supported by the HTML5 Video Widget:</strong></p>
<ul>
<li><strong>id</strong> [required] - the video tag must have a unique id defined</li>
<li><strong>src</strong> - Path to a media item. If defined, the player will play that media. Note that this is not a required attribute. Multiple sources can be defined with the source tag inside the video tag.</li>
<li><strong>poster</strong> - A relative or absolute path to a .png that displays prior to playing or when done playing.</li>
<li><strong>controls</strong> - Display the controls if set to true or as an unassigned attribute. Default value is false</li>
<li><strong>autoplay</strong> - When set to true or just as an unassigned attribute specifies that the media should play immediately. Default value is false</li>
<li><strong>volume</strong> - A decimal value ranging between 0 and 1. Default value is .5</li>
<li><strong>width</strong> - Defines the width of the player in pixels. Default value is 300</li>
<li><strong>height</strong> - Defines the height of the player in pixels. Default value is 150.</li>
<li><strong>loop</strong> - If set to true or it exists as an unassigned attribute specifies to repeat the content when done playing the file or set of files. The default value is false</li>
<li><strong>muted</strong> - Specifies to not play audio. Default value is false</li>
<li><strong>skin</strong> - This is a local XAML file that will be loaded up for the player UI. Ommision of this causes the default remote Media.xaml file to be loaded.</li>
<li><strong>behavior</strong> - This is the local pyton or ruby file that will be loaded up for the player UI. Ommision of this causes the default remote Media.py file to be loaded.</li>
<li><strong>captioningenabled</strong> - this attribute if set to true or unassigned will display the captioning icon in the controls to toggle captioning. Default value is false.</li>
<li><strong>captionareavisible</strong> - This attribute if set to true or unassigned will show the captioning area in the media control when it is loaded. Default value is false</li>
<li><strong>captionareaheight</strong> - An integer that defines the height of the caption area. The width is the same as the width of the player. Default height is 20.</li>
</ul>

</body>
</html>
